/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-08-02 15:16:46
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-10-17 18:00:34
 * @File Name: connections.js
 */

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    TabBarIOS,
} from 'react-native';

import UserList from '../common/userList';
const headData = [
                    {'tab': 'visitors', 'title': "Visitors", 'api': 'my_visitors', 'icon': require('../img/ico_visitors.png'), 'selectedIcon': require('../img/ico_visitors_active.png')},
                    {'tab': 'winkedMe', 'title': "Wink at Me", 'api': 'winkedme', 'icon': require('../img/ico_wink.png'), 'selectedIcon': require('../img/ico_wink_active.png')},
                    {'tab': 'interestedInMe', 'title': "Fave'd Me", 'api': 'interested_in_me', 'icon': require('../img/ico_fave.png'), 'selectedIcon': require('../img/ico_fave_active.png')},
                    {'tab': 'favorites', 'title': "My Faves", 'api': 'my_favors', 'icon': require('../img/ico_faves.png'), 'selectedIcon': require('../img/ico_faves_active.png')},
                 ];

export default class Connections extends Component {

    constructor(props) {
        super(props);
        this.state = {tab: 'visitors'};
    }

    render() {
        return (
            <TabBarIOS
                style={styles.container}
                unselectedTintColor={'#ccc'}
                tintColor="#56ade0"
                barTintColor="#fff">
                {
                    headData.map((item, i) => {
                        return (
                            <TabBarIOS.Item
                                key={i}
                                title={item.title}
                                selected={this.state.tab === item.tab}
                                icon={ item.icon }
                                selectedIcon={ item.selectedIcon }
                                onPress={() => {
                                    this.setState({tab: item.tab});
                                }}>
                                {this.renderContent(item.tab, item.api)}
                            </TabBarIOS.Item>
                        )
                    })
                }
            </TabBarIOS>
        )
    }

    renderContent(tab, api) {
        return (<UserList key={tab} api={api} options={{from: 0, offset  : 20}} navigator={this.props.navigator} />)              
    }
}

const styles = StyleSheet.create(Css.ConnectionsStyle);